import React, { useEffect, useState, useMemo } from 'react';
import { Image } from 'antd';
import { useModel } from 'umi';

import { PAD_STYLE } from '..';
import styles from './index.less';

import type { HotspotValue, coordinateType } from '..';

interface IHotspotViewProps {
  data: HotspotValue;
}

const HotspotView: React.FunctionComponent<IHotspotViewProps> = (props) => {
  const { initialState } = useModel('@@initialState');
  const { imgPrefix } = initialState as { imgPrefix: string };
  const [coordinateArr, setCoordinateArr] = useState<Partial<coordinateType>[]>([]);
  const { borderRadius, padStyle, imageUrl, coordinates } = props.data;

  // 等比模块计算--预览热区---编辑时第一次不显示
  // const coordinateArr = useMemo(() => {
  //   const arr: Partial<coordinateType>[] = [];
  //   if (imageUrl && coordinates.length > 0) {
  //     const curWidth =
  //       padStyle === PAD_STYLE.noPad.value
  //         ? document.querySelector('#hotImg')?.clientWidth || 0
  //         : (document.querySelector('#hotImg')?.clientWidth || 0) - 20;
  //     const curHeight = Number((curWidth / coordinates[0].aspectRate).toFixed(1));
  //     coordinates.forEach((item) => {
  //       arr.push({
  //         x:
  //           padStyle === PAD_STYLE.noPad.value ? curWidth * item.xRate : curWidth * item.xRate + 10, // 这个10悟了好久啊
  //         y:
  //           padStyle === PAD_STYLE.noPad.value
  //             ? curHeight * item.yRate
  //             : curHeight * item.yRate + 10,
  //         width: curWidth * item.widthRate,
  //         height: curHeight * item.heightRate,
  //       });
  //     });
  //     return arr;
  //   } else {
  //     return [];
  //   }
  // }, [props.data]);
  // 等比模块计算--预览热区
  useEffect(() => {
    const arr: Partial<coordinateType>[] = [];
    if (imageUrl && coordinates.length > 0) {
      const curWidth = document.querySelector('#hotImg')?.clientWidth || 0;
      // padStyle === PAD_STYLE.noPad.value
      //   ? document.querySelector('#hotImg')?.clientWidth || 0
      //   : (document.querySelector('#hotImg')?.clientWidth || 0) - 0;
      const curHeight = Number((curWidth / coordinates[0].aspectRate).toFixed(1));
      coordinates.forEach((item) => {
        arr.push({
          x:
            padStyle === PAD_STYLE.noPad.value ? curWidth * item.xRate : curWidth * item.xRate + 10, // 这个10悟了好久啊
          y:
            padStyle === PAD_STYLE.noPad.value
              ? curHeight * item.yRate
              : curHeight * item.yRate + 10,
          width: curWidth * item.widthRate,
          height: curHeight * item.heightRate,
        });
      });
    }
    setCoordinateArr(arr);
  }, [props.data]);

  return (
    <div
      className={styles['image-box']}
      style={{
        padding: padStyle === PAD_STYLE.withPad.value ? 10 : 0,
      }}
    >
      <Image
        draggable="false"
        id="hotImg"
        style={{
          borderRadius,
        }}
        rootClassName={styles['hot-image-item']}
        preview={false}
        src={`${imgPrefix}${props.data.imageUrl}`}
        fallback=""
      />
      {/* 预览--热区展示 */}
      {coordinateArr.length > 0 &&
        coordinateArr.map((item) => (
          <div
            className={styles['hover-box']}
            key={item.x}
            style={{
              width: item.width,
              height: item.height,
              left: item.x,
              top: item.y,
            }}
          />
        ))}
    </div>
  );
};

export default HotspotView;
